<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-fullpage">
    <div class="aui-header-1">
        <lv-group lvGutter="8px">
            <h1>{{ 'explore_detection_overview_label' | i18n }}</h1>
            <aui-multi-cluster-switch (onChange)="onChange()"></aui-multi-cluster-switch>
        </lv-group>
    </div>
    <div class="overview-container">
        <lv-group lvGutter="24px" style="height:100%">
            <span class="overview-image">
                <img src="assets/img/detection_data.svg" class="overview-img">
            </span>
            <span class="overview-data">
                <ng-container *ngFor="let item of allDetectionData">
                    <span class="data-unit-container">
                        <span class="data-unit-num">
                            {{ item.num }}
                        </span>
                        <div class="data-unit-status">
                            <i [ngStyle]="{ background: item.color }"></i>
                            <span class="data-unit-status-label">
                                {{ item.label }}
                                <i lv-icon="aui-icon-help" lv-tooltip="{{'explore_ready_to_detect_tip_label' | i18n}}"
                                     style="margin-bottom:4px" lvColorState='true'
                                    *ngIf="item.key === 'prepare_copy_num'"></i>
                            </span>
                        </div>
                    </span>
                </ng-container>
            </span>
            <span class="overview-data-graph">
                <div class="aui-operation">
                    <h2>{{ 'protection_detection_result_label' | i18n }}</h2>
                    <lv-select [lvOptions]="detectionTimeRangeOption" [(ngModel)]="selectedTime"
                        (ngModelChange)="changeTimeRange($event)" lvValueKey="value" lvSimple></lv-select>
                </div>
                <div id="detection-data-chart"></div>
            </span>
        </lv-group>
    </div>
    <div class="aui-block">
        <aui-resource-statistic></aui-resource-statistic>
    </div>
</div>
